<template>
	<view class="category">
		<view class="main">
			<view class="item">
				<view @tap="item1Click(categoryList[0])" v-if="categoryList.length > 0" class="content origin">
					<view class="text">
						<view class="title">{{categoryList[0].ctitle}}</view>
						<view>{{categoryList[0].etitle}}</view>
					</view>
					<view class="imgs">
						<image :src="categoryList[0].img" mode=""></image>
					</view>
				</view>
				<view  @tap="item2Click(categoryList[1])" v-if="categoryList.length > 0" class="content decorations">
					<view class="text">
						<view class="title">{{categoryList[1].ctitle}}</view>
						<view>{{categoryList[1].etitle}}</view>
					</view>
					<view class="imgs">
						<image :src="categoryList[1].img" mode=""></image>
					</view>
				</view>
				<view class="bottom">
					<view  @tap="item3Click(categoryList[2])" v-if="categoryList.length > 0" class="contents">
						<view class="text">
							<view class="title">{{categoryList[2].ctitle}}</view>
							<view>{{categoryList[2].etitle}}</view>
						</view>
						<view class="imgs">
							<image :src="categoryList[2].img" mode=""></image>
						</view>
					</view>
					<view  @tap="item4Click(categoryList[3])" v-if="categoryList.length > 0" class="contents">
						<view class="text">
							<view class="title">{{categoryList[3].ctitle}}</view>
							<view>{{categoryList[3].etitle}}</view>
						</view>
						<view class="imgs">
							<image :src="categoryList[3].img" mode=""></image>
						</view>
					</view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDetailList
	} from '@/network/category/index.js'
	export default {
		data() {
			return {
				categoryList: [],

			};
		},
		onLoad() {
			this.getDetailLists()
		},
		methods: {
			item1Click(item) {
				console.log(item)
				this.navigatorRouter(item.id)

			},
			item2Click(item) {
				console.log(item)
				this.navigatorRouter(item.id)
			},
			item3Click(item) {
				console.log(item)
				this.navigatorRouter(item.id)
			},
			item4Click(item) {
				console.log(item)
				this.navigatorRouter(item.id)
			},
			navigatorRouter(id) {
				let kindId = id
				console.log(22)
				// uni.reLaunch({
				// 	url: '/pages/product/product?kindId=' + kindId
				// })
				uni.navigateTo({
					url: '/pages/product/product?kindId=' + kindId
				})
			},
			getDetailLists() {
				getDetailList().then(res => {
					console.log(res)
					this.categoryList = res.data.data
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category {
		background-color: #F0EBE6;
		height: 100vh;
		// overflow: hidden;
		overflow: auto;
		.main {
			padding: 0 40rpx 0rpx;
			.item {
				.content {
					display: flex;
					justify-content: space-between;
					border-radius: 32rpx;
					margin: 40rpx 0;
					.text {
						margin: 90px 0 20px 20px;

						.title {
							font-size: 40rpx;
							color: #3e3e3e;
						}

						view {
							color: #7F7F7F;
							font-size: 28rpx;
						}
					}

					.imgs {
						width: 402rpx;
						height: 302rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.origin {
					background-color: #D5D5D5;
				}

				.decorations {
					background-color: #fff;
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					.contents{
						position: relative;
						width: 312rpx;
						height: 442rpx;
						.text {
							position: absolute;
							left: 44rpx;
							top: 150rpx;
							z-index: 1;
							.title {
								font-size: 40rpx;
								color: #3e3e3e;
							}
							view {
								color: #7F7F7F;
								font-size: 28rpx;
							}
						}
						.imgs {
							width: 312rpx;
							height: 442rpx;
							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}
		}
	}

	.active {
		color: #fff;
	}
</style>
